<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配送订单查询</title>
</head>
<body>
    <div th:fragment="content">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h3">配送订单查询</h2>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">查询条件</h5>
                </div>
                <div class="card-body">
                    <form id="orderSearchForm" th:action="@{/admin/delivery-orders}" method="get" class="row">
                        <div class="col-md-3 mb-3">
                            <label for="regionId" class="form-label">配送区域</label>
                            <select class="form-control" id="regionId" name="regionId">
                                <option value="">-- 所有区域 --</option>
                                <option th:each="region : ${regions}"
                                        th:value="${region.regionId}"
                                        th:text="${region.name}"
                                        th:selected="${param.regionId != null && param.regionId[0] == region.regionId.toString()}">
                                </option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="startTime" class="form-label">开始时间</label>
                            <input type="datetime-local" class="form-control" id="startTime" name="startTime"
                                   th:value="${param.startTime != null ? param.startTime[0] : ''}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="endTime" class="form-label">结束时间</label>
                            <input type="datetime-local" class="form-control" id="endTime" name="endTime"
                                   th:value="${param.endTime != null ? param.endTime[0] : ''}">
                        </div>
                        <div class="col-md-3 mb-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search me-1"></i> 查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">订单列表</h5>
                    <div>
                        <button class="btn btn-outline-success" onclick="exportData()">
                            <i class="fas fa-file-export me-1"></i> 导出数据
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>订单ID</th>
                                    <th>用户</th>
                                    <th>配送员</th>
                                    <th>金额</th>
                                    <th>配送地址</th>
                                    <th>配送状态</th>
                                    <th>创建时间</th>
                                    <th>完成时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="order : ${orders}" th:if="${orders != null and not #lists.isEmpty(orders)}">
                                    <td th:text="${order['order_id']}"></td>
                                    <td th:text="${order['username']}"></td>
                                    <td th:text="${order['courier_id'] != null ? '配送员#' + order['courier_id'] : '未分配'}"></td>
                                    <td th:text="${order['total_amount']}"></td>
                                    <td th:text="${order['address']}"></td>
                                    <td>
                                        <span th:if="${order['delivery_status'] == 'pending'}" class="badge badge-warning">待配送</span>
                                        <span th:if="${order['delivery_status'] == 'in_transit'}" class="badge badge-primary">配送中</span>
                                        <span th:if="${order['delivery_status'] == 'completed'}" class="badge badge-success">已完成</span>
                                    </td>
                                    <td th:text="${#temporals.format(order['created_at'], 'yyyy-MM-dd HH:mm')}"></td>
                                    <td>
                                        <!-- 使用containsKey方法先检查Map中是否存在completed_at键 -->
                                        <span th:if="${order.containsKey('completed_at') and order['completed_at'] != null}"
                                              th:text="${#temporals.format(order['completed_at'], 'yyyy-MM-dd HH:mm')}">
                                        </span>
                                        <span th:unless="${order.containsKey('completed_at') and order['completed_at'] != null}">-</span>
                                    </td>
                                </tr>
                                <tr th:if="${orders == null or #lists.isEmpty(orders)}">
                                    <td colspan="8" class="text-center">没有找到匹配的订单数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function exportData() {
                // 导出数据功能，实际项目中可以实现��下载CSV或Excel
                alert('导出功能将在实际项目中实现');
            }

            // 在页面加载时标记当前菜单为活动状态
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.sidebar-menu a').forEach(a => {
                    a.classList.remove('active');
                });
                document.getElementById('menu-delivery-orders').classList.add('active');

                // 如果没有设置时间范围，默��设置为最近7天
                if (!document.getElementById('startTime').value) {
                    const now = new Date();
                    const sevenDaysAgo = new Date();
                    sevenDaysAgo.setDate(now.getDate() - 7);

                    document.getElementById('endTime').value = now.toISOString().slice(0, 16);
                    document.getElementById('startTime').value = sevenDaysAgo.toISOString().slice(0, 16);
                }
            });
        </script>
    </div>
</body>
</html>